<template>
    <div>
        <a-spin v-if="loading" />
        <a-tree
            v-else
            checkable
            :tree-data="treeData"
            @check="handleSelect"
            :defaultExpandAll="false"
            defaultExpandParent
            :replaceFields="replaceFields"
            :checkedKeys="showRoutes" />
    </div>
</template>

<script>
import { deepClone } from '@/utils';
import {remoteList} from '@/api/system/menu'

export default {
    name: 'standardTree',
    props: {
        routes: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            loading:false,
            treeData: [],
            replaceFields:{
                children:'children',
                title:'menuName',
                key:'path'
            }
        };
    },
    computed: {
        showRoutes(){
            let menus = deepClone(this.routes)
            if(!menus.length) return [];
            let routes = this.dealRoutes(menus)
            return routes;
        }
    },
    created() {
        this.getMenus();
    },
    methods: {
        handleSelect(selectedKeys, info) {
            let allKeys = selectedKeys.concat(info.halfCheckedKeys);
            this.$emit('change', allKeys);
        },
        //处理父节点 选中 子节点为全选
        dealRoutes(routeData){
            if(!this.treeData.length) return [];
            let routes = deepClone(routeData);
            this.dealMenuChecked(this.treeData,routes)
            let res = this.dealChecked(this.treeData,routes)
            return res
        },
        dealMenuChecked(treeData,routes){
            if(treeData?.length){
                treeData.map(item=>{
                    item.childNum = 0;
                    if(item.children?.length){
                        item.children.map(child=>{
                            if(routes.indexOf(child.path)!=-1){
                                item.childNum +=1
                            }
                        })
                        item.children = this.dealMenuChecked(item.children,routes)
                    }else{
                        if(routes.indexOf(item.path)!=-1){
                            item.childNum +=1
                        } 
                    }
                })
            }
            return treeData;
        },
        dealChecked(treeData,menus){
            let menusArray = deepClone(menus);
            if(treeData?.length){
                treeData.map(item=>{
                    if(item.children?.length){
                        if(item.childNum!=0 && item.childNum<item.children.length){
                            menusArray = menusArray.filter(route=>route!=item.path)
                            menusArray = this.dealChecked(item.children,menusArray)
                        }
                    }
                })
            }
            return menusArray
        },
        //获取菜单列表
        async getMenus(){
            try{
                this.loading = true;
                let res = await remoteList();
                let {code,data} = res;
                if(code==200){
                    this.treeData = data;
                }
            }finally{
                this.loading = false;
            }
        }
    }
};
</script>
<style lang="scss" scoped></style>
